after

Internet Explorer

Chrome

Opera

Safari

Firefox

7.0

8.0

9.0

7.0

8.0

9.6

10.0

10.0

3.1

4.0

5.0

3.0

3.6

4.0

Частково

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

 

Коротка інформація

CSS

CSS2

Значення за умовчанням

Ні

Наслідує

Ні

Застосовується

До усіх елементів

Аналог HTML

Ні

Посилання на специфікацію

http://www.w 3.org/TR/CSS21/selector.html#before - and - after

Опис

Псевдоелемент, який використовується для виведення бажаного контенту після елементу, до якого він додається. Псевдоелемент after працює спільно з властивістю content.

Для after характерні наступні особливості.

  1. При додаванні after до блокового елементу, значення властивості display може бути тільки: block, inline, none, marker. Усі інші значення трактуватимуться як block.
  2. При додаванні after до вбудованого елементу, display обмежений значеннями inline і none. Усі інші сприйматимуться як inline.

Синтаксис

Елемент: after { content: "текст" }

Значення

Ні.

Приклад

HTML 4.0  CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

    <title>after</title>

    <style type="text/css">

        p.new: after {

            content: "Новье"!; /* текст, що Додається, */

            color: #333; /* Колір тексту */

            background - color: #fc0; /* Колір фону */

            font - size: 90%; /* Розмір шрифту */

            padding: 2px; /* Полів навколо тексту */

        }

    </style>

  </head>

  <body>

    <h2>Історії</h2>

    <p class="new">Історія про те, як необхідно було зробити могилу,

          її почали копати, а потім закопувати, і що з цього вийшло.</p>

    <p>Історія про те, як біля їдальні з'явилися загадкові рожеві

          сліди з шістьма пальцями, і чому це сталося.</p>

  </body>

</html>

У цьому прикладі у кінці текстового абзацу, поміченого класом new, виводиться певний текст для привертання уваги. Результат прикладу показаний на мал. 1.

Мал. 1. Результат використання псевдоелементу after

Браузери

Opera 9.2 враховує усі пропуски, начебто вони були поміщені в тег <PRE>.

Браузер Firefox до другої версії включно нестабільно працює з елементами, що позиціонуються, а також не застосовує after до тега <FIELDSET>.